<template>
    <div id="adminlist">
        <div class="topi">
             <el-date-picker
                v-model="searchdate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <el-input placeholder="用户名" v-model="searchinput">
                <el-button slot="append" @click="getAdminList(1)" icon="el-icon-search"></el-button>
            </el-input>
            <el-button @click="addAdmin" type='primary'>添加管理员</el-button>
        </div>
         <el-table :data="tableData" border  style="width: 100%">
            <el-table-column v-for="col in tableCols" :key="col.id"  :prop="col.prop"
            :label="col.label">
            </el-table-column>
            <el-table-column prop='state' :formatter='changeState' label='状态'></el-table-column>
            <el-table-column  label="操作"  align="center" width="172">
                <template slot-scope="scope">
                  <el-button type="text" size="normally"  @click="changeAdminState(scope.row)">{{scope.row.state == 1 ? '冻结' : '恢复'}}</el-button>
                  <el-button type="text" size="normally"  @click="view(scope.row)">查看</el-button>
                </template>
              </el-table-column>
        </el-table>
        <el-pagination class="pageinfo" background layout="total, prev, pager, next" 
          @current-change='changeCurrentPage'
          :total="totals">
        </el-pagination>

    </div>
 
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        tableCols: [
            {id: 1, prop: 'id', label: 'id'}, {id: 2, prop: 'userName', label: '用户名'}, {id: 3, prop: 'fullName', label: '姓名'},
            {id: 4, prop: 'phone', label: '手机号'}, {id: 5, prop: 'email', label: '电子邮箱'}, {id: 6, prop: 'roleName', label: '角色'},
            {id: 7, prop: 'createTime', label: '注册时间'}
        ],
        searchinput: '',
        searchdate: [], // UTC => 2019/10/12
        currentPage: 1,
        totals: 0,
      }
    },
    mounted() {
      this.getAdminList()
    },
    methods: {
        addAdmin() {
          this.$router.push({path: 'admindetail', query: {mode: 'add'}})
        },
        view(row) {
            this.$router.push({path: 'admindetail', query: {mode: 'view', id: row.id}})
        },
        changeAdminState(row) {
          // 修改管理员状态
          let param = {
            id: row.id,
            state: row.state == 1 ? 2 : 1
          }
          this.$api.apiEditAdminState(param, res => {
              this.$message({
                type: 'success',
                message: row.state == 1 ? '冻结成功' : '恢复成功'
              })
              this.getAdminList()
          })
        },
        changeCurrentPage(page) {
          this.currentPage = page
          this.getAdminList()
        },
        getAdminList(arg) {
          // 获取管理员列表
          if(this.searchdate == null) {
              this.searchdate = []
          }
          let startdate, enddate;
          if(this.searchdate[0] != undefined) {
              startdate = this.$moment(this.searchdate[0]).format('YYYY/MM/DD')
          } else {
            startdate = this.searchdate[0]
          }
          if(this.searchdate[1] != undefined) {
              enddate = this.$moment(this.searchdate[1]).format('YYYY/MM/DD')
          } else {
            enddate = this.searchdate[1] 
          }
          let param = {
            startDate: startdate,
            endDate: enddate,
            userName: this.searchinput,
            page: arg || this.currentPage,
            limit: 10
          }
          this.$api.apiGetAdminList(param, res => {
              this.tableData = res.data
              this.tableData.forEach(item => {
                item.createTime = this.$moment(item.createTime).format('YYYY/MM/DD')
              })
              this.totals = res.pageInfo.total
          })
        },
        searchTable() {
          this.getAdminList()
        },
        changeState(val) {
          
          let text = ''
          switch(val.state) {
            case 1: text = '正常';break;
            case 2: text = '已冻结';break;
            default: break;
          }
          return text
        }
    }
  }
</script>
<style lang="scss">
#adminlist {
  .topi {
        display: flex;
        width: 80%;
        margin-bottom: 20px;
        .el-input {
            width: 40%;
            margin-left: 30px;
            margin-right: 100px
        }
    }
}
    
</style>
